Amplifyで手軽にアプリを作って試す「Amplify Vue Workshop」をやってみた

こんにちは、ゲームソリューショングループのsoraです。
今回は、Amplifyで手軽にアプリを作って試す「Amplify Vue Workshop」をやってみたことについて書いていきます。

コースの概要

Amplifyを使って、Webアプリのホスティング、認証機能の実装を行います。
オプションとして、チャットの実装やAIサービスを使ったAI機能の実装、地図アプリの実装などがあります。
※Amplify Vue Workshopから引用

構成図の中で複数サービスが出てきますが、CodeCommitとAmplify以外は全てAmplify CLIでコマンドを実行するだけで作成が可能です。

以下がコースの概要です。
コースの所要時間は約3時間です。

1. 前提知識/条件
2. 環境構築/Vue アプリの作成
3. ホスティング
4. 認証の実装
5. チャットの実装（オプション）
6. AI の実装（オプション）
7. 地図の実装（オプション）
8. 片付け

必要な前提知識

フロント部分をVueで作成するもののコピペで完結するため、バックエンドやインフラエンジニアの方も前提知識なしでAmplifyを体験することができます。
私もVueの知識はほとんどありませんが、Amplifyの動きの部分は理解することができました。

コースの各章の紹介

どういったものを実装しながら学べるのかを紹介します。 実際に実装しながら、詳細に学びたい方は実際に受講してみてください。

1.前提知識/条件

Amplifyとはなにか、Amplifyのコンポーネントなどの説明があります。

• Amplify CLI：Amplifyでバックエンドをインタラクティブに作成・管理するCLI
• Amplify Libraries：AmplifyアプリとAWSを結合するためのOSSライブラリ
• Amplify Hosting：サーバレスなWebアプリをホスティングするサービス　CICDの機能も持つ
• Amplify Studio：Amplifyでバックエンドとコンテンツを管理するためのツール

2.環境構築/Vue アプリの作成

Cloud9上に環境を構築する流れが記載されています。
ローカル環境で実施することも可能です。
Amplify CLIでは、以下コマンドでアプリへの機能追加や更新を行います。

# アプリへの機能追加
$ amplify add <category-name>
# 機能の設定更新
$ amplify update <category-name>
# 機能の削除
$ amplify remove <category-name>
# プロジェクト全体の削除
$ amplify delete

3.ホスティング

Amplify Hostingを使って、CodeCommitにpushした内容をS3とCloudFrontを使って配信します。
個別にCodePipelineなどでCI/CDの自動化をせずとも、Amplify HostingでCI/CDの機能も実現できるのは便利だと感じました。
この項目では、マネジメントコンソール上でAmplifyやCodeCommitを操作する必要がありますが、以降はAmplify CLIで構築できてしまいます。

4.認証の実装

Cognitoを利用して、認証機能を実装します。

# Auth機能の追加
$ amplify add auth
# AWS上へ反映
$ amplify push

機能追加時の設定は、インタラクティブに選択していくことで設定できます。
個別にconfigファイルを修正したり、マネジメントコンソールで設定を入れたりする必要はありません。

5.チャットの実装（オプション）

GraphQLのエンドポイントにAppSync、データストアにDynamoDBを使用して、チャットアプリを実装します。

# GraphQL APIと自動設定されるデータベースの作成
$ amplify add api
# AWS上へ反映
$ amplify push

ここでも機能追加時の設定は、インタラクティブに選択していくことで設定できます。

6.AI の実装（オプション）

以下の機能をそれぞれ実装していきます。
AIサービスを使って動くものが作れるので、AIサービスを学ぶこともできました。
全てAmplify CLIのコマンドは同じですが、インタラクティブに選択していく部分で選択するものによって、様々な機能を実現することができます。

テキスト翻訳

Translateを使って、入力した英語の文章に対して、リアルタイムで日本語に翻訳する機能を実装します。

# テキスト翻訳の機能の追加
$ amplify add predictions

画像内の物体検知・画像内のテキスト検知

Rekognitionを使って、アップロードした画像の物体検知を行い、画像内のものが何であるかを特定します。
同じくRekognitionを使って、画像内のテキストの検知も行います。

# 画像内の物体検知やテキスト検知をする機能を追加
$ amplify add predictions

テキスト解析

Comprehendを使って、入力した文字に対して、言語の判定やキーフレーズの判定などの文章解析を行います。

# 文章解析の機能を追加
$ amplify add predictions

テキストスピーチ

Pollyを使って、入力した文章を音声で再生することができます。

# テキストスピーチの機能を追加
$ amplify add predictions

7.地図の実装（オプション）

Locationでマップを作成して地図を表示します。

# Geoカテゴリをセットアップ
$ amplify add geo

最後に

今回は、Amplifyで手軽にアプリを作って試す「Amplify Vue Workshop」をやってみたことを記事にしました。
Amplifyを触ってみたい方におすすめで、少しAIサービスも実装する部分もあるため、AWSのAIサービスを使って動くものが見たい方にもおすすめです。
興味がある方はぜひ試してみてはいかがでしょうか？